import { useEffect } from "react";
import type { GetStaticPropsContext } from "next";
import { useRouter } from "next/router";

import MDXContent from "@/components/content/mdx";
import PageLayout from "@/components/page-layout";
import SeoMeta from "@/components/seo-meta";
import { ENABLE_DRAFTS } from "@/config/constants";
import { unwrapArray } from "@/helpers/array";
import { useTheme } from "@/hooks";
import { getAllPagesSlugs, getPageBySlug } from "@/lib/api";
import { useStore } from "@/store";
import { type MDXPage } from "@/types";

interface MDXPageProps {
  page: MDXPage | null;
  error: boolean;
}

export default function MDXPage({ page, error }: MDXPageProps) {
  const setCurrentTheme = useStore.use.setCurrentTheme();
  const router = useRouter();

  useEffect(() => {
    if (error || page === null) {
      router.push("/404");
    }
  }, [error, page, router]);

  useEffect(() => {
    if (page?.frontMatter.theme) setCurrentTheme(page.frontMatter.theme);
    return () => setCurrentTheme();
  }, [page?.frontMatter.theme, setCurrentTheme]);

  useTheme();

  return (
    <PageLayout variant={page?.frontMatter.layout}>
      <SeoMeta
        title={page?.frontMatter.title}
        description={page?.frontMatter.description}
      />
      {page && <MDXContent mdxSource={page.mdxSource} />}
    </PageLayout>
  );
}

export async function getStaticProps(context: GetStaticPropsContext) {
  const { params } = context;

  if (params && params.slug) {
    const slug = unwrapArray(params.slug);
    const page = await getPageBySlug(slug, ENABLE_DRAFTS);
    return {
      props: { page, error: !page },
    };
  }

  return {
    props: { page: null, error: true },
  };
}

export async function getStaticPaths() {
  const slugs = await getAllPagesSlugs(ENABLE_DRAFTS);

  return {
    paths: slugs.map((slug: string) => ({
      params: { slug },
    })),

    fallback: false,
  };
}